<template>
    <div class="container">
        <div id="konva"></div>
    </div>
</template>
<script>
import Konva, { Stage, Layer, Rect, Group } from "konva";

export default {
    data() {
        return {
            stage: null,
            layer: null,
        };
    },
    mounted() {
        this.initStage();
        this.addRect();
    },
    computed: {},
    watch: {},
    methods: {
        initStage() {
            this.stage = new Stage({
                container: "#konva",
                width: 500,
                height: 500,
            });
            this.layer = new Layer();
            this.stage.add(this.layer);
        },
        addRect() {
            const group1 = new Group();
            const group2 = new Group();
            const rect1 = new Rect({
                x: 50,
                y: 50,
                width: 200,
                height: 200,
                fill: "red",
                draggable: true,
            });
            const rect2 = new Rect({
                x: 100,
                y: 100,
                width: 200,
                height: 200,
                fill: "blue",
                draggable: true,
            });
            group1.add(rect1);
            group2.add(rect2);
            this.layer.add(group1, group2);
            setTimeout(() => {
                group1.moveToTop();
            }, 1000);
        },
    },
};
</script>
<style>
#konva {
}
</style>
